<style scoped>
    #chart-bar {
        width: 100%;
        height: 600px;
        margin: 10px auto;
    }
</style>

<template>
    <div>
        <Row>
            <Card>
                <div class="top-tool-bar">
                    <Select v-model="province" style="width:140px" placeholder="请选择省份"  :label-in-value="true" @on-change="selectProvince">
                        <Option v-for="item in provinceList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="city" style="width:140px" placeholder="请选择城市"  :label-in-value="true" @on-change="selectCity">
                        <Option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <!--<Select v-model="area" style="width:140px" placeholder="请选择地区"  :label-in-value="true" @on-change="selectArea">
                      <Option v-for="item in areaList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>-->

                    <Select v-model="type" style="width:140px" placeholder="请选择站点类型"  :label-in-value="true" @on-change="selectType">
                        <Option v-for="item in typeList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="site" style="width:140px" placeholder="请选择站点名"  :label-in-value="true" @on-change="selectSite">
                        <Option v-for="item in siteList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Select v-model="region" style="width:140px" placeholder="请选择查询区域" :label-in-value="true" @on-change="selectRegion">
                        <Option v-for="item in regionList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="condition" style="width:140px" placeholder="请选择参数条件"  :label-in-value="true" @on-change="selectCondition">
                        <Option v-for="item in conditionList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Select v-model="parameter" style="width:140px" placeholder="请选择查询参数"  :label-in-value="true" @on-change="selectParameter">
                        <Option v-for="item in parameterList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Form :model="list" label-position="right" :label-width="80" inline>
                        <FormItem label="查询条件">
                            <Select v-model="condition1" style="width:150px">
                                <Option value="月" key="月"></Option>
                                <Option value="日" key="日"></Option>
                                <Option value="小时" key="小时"></Option>
                            </Select>
                        </FormItem>
                        <FormItem label="时间">
                            <DatePicker type="month" placeholder="选择月" style="width: 200px"></DatePicker>
                            <DatePicker type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
                            <DatePicker type="datetime" format="yyyy-MM-dd HH点" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
                        </FormItem>
                        <Button type="primary" icon="checkmark-circled">确定</Button>
                        <div id="chart-bar"></div>
                    </Form>
                </div>

                <Table border :columns="columns1" :data="data1"></Table>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    import echarts from 'echarts';
    import 'echarts/chart/bar';
    import 'echarts/chart/line';
    import 'echarts/component/title';
    import 'echarts/component/tooltip';
    import 'echarts/component/legend';
    import 'echarts/component/toolbox';
    export default {
        mounted() {
            this.initChart1();
            this.getProvince();
        },
        data() {
            return {
                list: {},
                provinceList: [],
                cityList: [],
                areaList: [],
                typeList: [],
                siteList: [],
                regionList: [],
                conditionList:[],
                parameterList: [],
                province: null,
                city: null,
                area: null,
                type: null,
                site: null,
                region: null,
                condition:null,
                parameter: null,
                condition1: '',
                option: {},
                colors : ['#785FD1','#BA3FBA','#5793f3','#d14a61'],
                columns1: [
                    {
                        "title": "参数",
                        "key": "name",
                        "fixed": "left",
                        "width": 200
                    },
                    {
                        "title": "最大值",
                        "key": "show",
                    },
                    {
                        "title": "最小值",
                        "key": "weak",
                    },
                    {
                        "title": "平均值",
                        "key": "day",
                    },
                ],
                data1: [
                    {
                        "name": "1#储罐压力",
                        "show": 3.9,
                        "weak": 5.9,
                        "day": 3.0,
                    },
                    /*{
                     "name": "2#储罐压力",
                     "show": 3.9,
                     "weak": 5.9,
                     "day": 3.0,
                     }*/
                ]
            }
        },
        methods: {
            initChart1() {
                let $this = this;
                $this.option = {
                    title: {
                        text: '1#储罐',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['1#储罐压力', '2#储罐压力']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            name: '时间',
                            axisLabel: {
                                onZero: false,
                                textStyle: {
                                    color:this.colors[0]
                                }
                            },
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '压力值',
                            axisLabel: {
                                onZero: false,
                                textStyle: {
                                    color:this.colors[1]
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name: '1#储罐压力',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color:this.colors[2]
                                }
                            },
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        /*{
                         name: '2#储罐压力',
                         type: 'bar',
                         itemStyle:{
                         normal:{
                         color:this.colors[3]
                         }
                         },
                         data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                         markPoint: {
                         data: [
                         {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                         {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                         ]
                         },
                         markLine: {
                         data: [
                         {type: 'average', name: '平均值'}
                         ]
                         }
                         }*/
                    ]
                };
                var echartsSecond = document.getElementById('chart-bar');
                var myChart = echarts.init(echartsSecond);
                myChart.setOption($this.option);
            },
            getProvince() {
                let params = {
                    id:0
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.provinceList = data.data;

                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getCity(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.cityList = data.data;

                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getArea(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.areaList = data.data;

                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getType(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo,params).then((data) => {
                    this.$emit('hideLoading');
                    this.typeList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getSize(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.siteList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getRegion(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.regionList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getCondition(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.conditionList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getParameter(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.parameterList = data.data;
                }).catch(err =>  {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            selectProvince(data) {
                console.log(data);
                this.cityList = [];
                this.areaList = [];
                this.getCity(data.value);
            },
            selectCity(data) {
                console.log(data);
                this.areaList = [];
                this.getArea(data.value);
            },
            selectArea(data) {
                console.log(data);

            },
            selectType(data) {
                console.log(data);
                this.siteList = [];
                this.regionList = [];
                this.parameterList =  [];
                this.getSize(data.value);
            },
            selectSite(data) {
                console.log(data);
                this.regionList = [];
                this.parameterList = [];
                this.regionList(data.value);
            },
            selectRegion(data) {
                console.log(data);
                this.provinceList = [];
                this.parameterList(data.value);
            },
            selectCondition(data) {
                console.log(data);
                this.getParameter(data.value);
            },
            selectParameter(data) {
                console.log(data);
            }
        }
    }
</script>
